Visualizing expressions that can appear on the left side of an assignment.
These are used to access the properties of an object. The dot notation (`obj.prop`) is for when the property name is a valid identifier. Bracket notation (`obj['prop']`) is more flexible, allowing for variable names and special characters.
const user = { name: 'Alice', 'user-id': 123 };
const prop = 'name';
user.name; // 'Alice'
user['user-id']; // 123
user[prop]; // 'Alice'
Accessing properties with dot and bracket notation.
Object: { name: 'John', 'email-id': 'john@example.com' }
`user.name`:
`user['email-id']`:
A safe way to access nested object properties. If a property in the chain is `null` or `undefined`, the expression short-circuits and returns `undefined` instead of throwing a `TypeError`.
const user = {};
user.address?.street; // undefined
Observe the difference with and without optional chaining when a property is missing.
Object: const user = { name: 'Alice' };
user.address.city:
user.address?.city:
The **`new`** operator creates an instance of a constructor function or class. **`new.target`** is a special meta-property available in functions, returning the constructor that was called with `new`.
class Car {
constructor() {
console.log(new.target); // Returns the class name
}
}
const myCar = new Car();
Creating new objects and inspecting `new.target`.
The **`super`** keyword is used to call methods of the parent class. **`import()`** is a function-like expression that allows for dynamic, asynchronous loading of modules. It returns a `Promise`.
class Bird extends Animal {
fly() {
super.move();
}
}
const module = await import('./my-module.js');
These expressions cannot be fully demonstrated in a single HTML file. However, we can visualize their purpose.
`super` (Class Inheritance)
Child Class `Dog` calling `super.speak()` to access the parent's (`Animal`) method.
Output:
`import()` (Dynamic Loading)
Simulating an async `import` that returns a value after a delay.
Status: Ready
Result: